<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="layui/css/layui.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="http://11.16.127.24:8219/baidumap/luwang/DrawingManager.css" />
  <link rel="stylesheet" href="./css/style.css">
  <link rel="stylesheet" href="./css/index.css">
  <title>首页</title>
</head>

<body style="background-color:#001737;">
  <div class="top_Mask"></div>
  <div class="left_Mask"></div>
  <!-- 头部的部分 -->
  <div class="source_head">
    <div class="head-title">
      源头管控
    </div>
    <div class="head-tab">
      <ul>
        <li data-type="1">首页</li>
        <li class="active" data-type="2">源头管控</li>
        <li data-type="3">车路联动</li>
        <li data-type="4">集约消纳</li>
      </ul>
    </div>
    <div class="head_date" id="headDate">
      <!-- <span>2022.03.09</span><span>星期二</span>  -->
    </div>
  </div>
  <!-- 左半部分 -->
  <div class="source_left">
    <div class="source_left_nav">
      <div class="source_type_title">
        总工地数
        <div class="source_type_number" data-num="1">
          <span id="totalNum"></span>
          <i class="arrow active"></i>
        </div>
      </div>
      <div class="source_type_fine" id="compreID">
        <div class="fine">
          <div class="fine-icon" data-type="5">
            <img src="./images/gongdi1.png" alt="">
          </div>
          <p>拆迁工地</p>
        </div>
        <div class="fine">
          <div class="fine-icon" data-type="1">
            <img src="./images/gongdi2.png" alt="">
          </div>
          <p>在建工地</p>
        </div>

        <div class="fine">
          <div class="fine-icon" data-type="2">
            <img src="./images/gongdi4.png" alt="">
          </div>
          <p>市政</p>
        </div>
        <div class="fine">
          <div class="fine-icon" data-type="3">
            <img src="./images/gongdi5.png" alt="">
          </div>
          <p>装修工程</p>
        </div>
      </div>
    </div>
    <div class="source_left_nav">
      <!-- onclick="getWarning" -->
      <div class="source_type_title">
        运输活动预警
        <div class="source_type_number" data-num="2">
          <span id="warnNum"></span>
          <i class="arrow"></i>
        </div>
      </div>
      <div class="source_type_fine" id="fine-iconID" style="display: none;">
        <div class="fine">
          <div class="fine-icon" data-type="0">
            <img src="./images/gongdi6.png" alt="">
          </div>
          <p>出入口抓拍</p>
        </div>
        <div class="fine">
          <div class="fine-icon" data-type="2">
            <img src="./images/gongdi7.png" alt="">
          </div>
          <p>卫星定位研判</p>
        </div>
        <div class="fine">
          <div class="fine-icon" data-type="3">
            <img src="./images/gongdi8.png" alt="">
          </div>
          <p>群众举报</p>
        </div>
        <div class="fine">
          <div class="fine-icon" data-type="4">
            <img src="./images/gongdi9.png" alt="">
          </div>
          <p>卫星遥感影像</p>
        </div>
      </div>
    </div>
    <div class="source_left_nav">
      <div class="source_type_title">
        建委监控工地
        <div class="source_type_number" data-num="3">
          <span id="monitorNum"></span>
          <i class="arrow"></i>
        </div>
      </div>
    </div>
    <div class="source_left_nav">
      <div class="source_type_title" onclick="getLockNum(true)">
        锁定出土工地
        <div class="source_type_number" data-num="4">
          <span id="LockNum"></span>
          <i class="arrow"></i>
        </div>
      </div>
    </div>
  </div>
  <div class="source_right">
    <div class="select-right">
      <div class="time-select">
        <input class="layui-input" id="test1" type="text" placeholder="" readonly>
      </div>
      <div class="gj-select">
        <select name="" id="">
          <option value="gongju1">工具1</option>
          <option value="gongju2">工具2</option>
        </select>
      </div>
    </div>
    <!-- 详情部分 -->
    <div class="right-box" id="Regional">
      <div class="box-title">
        <div class="title-text">
          全区实时工地分析
        </div>
        <!-- <div class="title-close">
          <img src="images/close.png" />
        </div> -->
      </div>
      <div class="box-nr" id="regionXX" style="height: 600px;overflow: auto;">
        <div class="box-nr-tit">
          <img src="images/dingwei.png" />
          全区情况
        </div>
        <div class="box-nr-xx" id="totalXX">
          <ul class="box-nr-table box-nr-table-header">
            <li>工程状态</li>
            <li>总面积(㎡)</li>
            <li>总数量</li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 全区实时工地分析 -->
    <div class="right-box" id="realAnalysis" style="display: none;">
      <div class="box-title">
        <div class="title-text">
          全区实时工地分析
        </div>
        <div class="title-close" id="titClose">
          返回
        </div>
      </div>
      <div class="box-nr">
        <div class="box-nr-tit box-nr-tit-gcs">
          <div class="gcs-title">
            <img src="images/dingwei.png" />
            北下关街道工地情况
          </div>
          <div class="gcs">
            总工程数：<span>221家</span>
          </div>
        </div>
        <div class="gc-list">
          <div class="gc-name">拆迁工地：</div>
          <div class="gc-xx">
            <span>1223</span>万平方米
            <span>1233</span>处
          </div>
        </div>

      </div>
    </div>
    <!-- 工程概况 -->
    <div class="right-box" style="display: none;">
      <div class="box-title">
        <div class="title-text">
          工程概况
        </div>
        <div class="title-close">
          返回
        </div>
      </div>
      <div class="box-nr">
        <div class="box-nr-tit box-nr-tit-gcs">
          <div class="gcgk-title">
            <img src="images/tuceng.png" />
            <div class="gcgk-fz">
              负责人：<p>刘秀华</p>
            </div>
          </div>
          <div class="gcgk-btn">
            详情
          </div>
        </div>
        <div class="gcgk-list">
          <div class="gcgk-name">施工许可证：</div>
          <div class="gcgk-xx">【2019】施[海]建字0278号</div>
        </div>
        <div class="gcgk-list">
          <div class="gcgk-name">工程性质：</div>
          <div class="gcgk-xx">房屋建设工程->小区配套公建-></div>
        </div>
        <div class="gcgk-list">
          <div class="gcgk-name">建设地点：</div>
          <div class="gcgk-xx">【2019】施[海]建字0278号</div>
        </div>
        <div class="gcgk-list">
          <div class="gcgk-name">建设单位：</div>
          <div class="gcgk-xx">【2019】施[海]建字0278号</div>
        </div>
        <div class="gcgk-list">
          <div class="gcgk-name">施工单位：</div>
          <div class="gcgk-xx">【2019】施[海]建字0278号</div>
        </div>
        <div class="gcgk-list">
          <div class="gcgk-name">监理单位：</div>
          <div class="gcgk-xx">【2019】施[海]建字0278号</div>
        </div>
        <div class="gcgk-list">
          <div class="gcgk-name">形象进度：</div>
          <div class="gcgk-xx">【2019】施[海]建字0278号</div>
        </div>
        <div class="gcgk-list">
          <div class="gcgk-name">管辖科室：</div>
          <div class="gcgk-xx">【2019】施[海]建字0278号</div>
        </div>
        <div class="gcgk-list">
          <div class="gcgk-name">所属街道：</div>
          <div class="gcgk-xx">【2019】施[海]建字0278号</div>
        </div>
        <div class="gcgk-list">
          <div class="gcgk-name">建筑面积（平方米/延米）：</div>
          <div class="gcgk-xx">28808.77</div>
        </div>
        <div class="gcgk-list">
          <div class="gcgk-name">工程性质：</div>
          <div class="gcgk-xx">房屋建设工程->小区配套公建-></div>
        </div>
        <div class="gcgk-list">
          <div class="gcgk-name">工程目前状态：</div>
          <div class="gcgk-xx">房屋建设工程->小区配套公建-></div>
        </div>
        <div class="gcgk-list">
          <div class="gcgk-name">创建时间：</div>
          <div class="gcgk-xx">房屋建设工程->小区配套公建-></div>
        </div>
        <div class="gcgk-list">
          <div class="gcgk-name">修改时间：</div>
          <div class="gcgk-xx">房屋建设工程->小区配套公建-></div>
        </div>
      </div>
    </div>
  </div>
  <div id="mappart" style="width: 100%;height: 100%;"> </div>
</body>

</html>
<!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.10&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script> -->
<!-- <script src="https://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=E4805d16520de693a3fe707cdc962045&services=&t=20220224113913"></script> -->
<script type="text/javascript" src="http://11.16.127.24:8219/baidumap/jsapi/api.js?v=1.50"></script>
<script type="text/javascript" src="http://11.16.127.24:8219/baidumap/jsapi/library/Heatmap/Heatmap_min.js"></script>
<script type="text/javascript" src="http://11.16.127.24:8219/baidumap/luwang/jquery.min.js?v=1.50"></script>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script src="../js/mapv.min.js?v=1.50"></script>
<script src="../js/mapv.js?v=1.50"></script>
<script src="js/echarts.min.js?v=2.1000"></script>
<script src="layui/layui.js?v=1.40"></script>
<script src="js/index.js"></script>

<script>
  $(function () {
    var newDateM = getNewDate()
    var queryDate = newDateM
    var warnDate = queryDate.substr(0, 4) + queryDate.substr(5, 2)
    //调取一张图
    getBJPicture()
    getHDPicture(queryDate)
    // 按顺序调取地图图层
    drawBeiJing()
    drawHaiDian()
    getonload()
    getCurrentDate() // 调用右上角日期

    getTotalQuantity(warnDate, '1,2,3,4,5', '0,2,3,4')

    //默认获取第一类型数据
    getAllSiteMap('1', newDateM, true) // 描边
    getAllMapList('1', newDateM) // 右侧数据

    layui.use(['element', 'layer', 'laydate'], function () {
      var element = layui.element;
      var layer = layui.layer;
      var laydate = layui.laydate;
      var form = layui.form;
      //初始赋值
      laydate.render({
        elem: '#test1',
        value: newDateM,
        type: 'month',
        btns: ['confirm'],
        done: function (value) {
          queryDate = value
          warnDate = value.substr(0, 4) + value.substr(5, 2)
          getTotalQuantity(warnDate, '1,2,3,4,5', '0,2,3,4')
          getHDPicture(queryDate)
          // getAllSiteMap('1,2,3,4,5', queryDate, true)
          // getAllMapList('1,2,3,4,5', queryDate)

          // warning('0,2,3,4', warnDate, true, true)
          // 调取总工地数
        }
      });

      //监听折叠
      element.on('collapse(test)', function (data) {
        layer.msg('展开状态：' + data.show);
      });

    });
    // head 的跳转
    $(".head-tab ul li").click(function () {
      $(this).addClass("active").siblings().removeClass("active")
      let type = $(this).attr("data-type")
      if (type == 1) {
        window.location.href = 'http://11.16.127.79/home/index.html'
      } else if (type == 3) {
        window.location.href = 'http://11.16.127.79/vias_app/views/vias/snapshot/vehicleTrajectory/vehicleTrajectory.html'
      } else if (type == 4) {
        window.location.href = 'http://11.16.127.79/ditu/indexJyly.html'
      }
    })
    $(".source_type_title .source_type_number").click(function (e) {
      let index = $(this).attr('data-num')
      var eq = index - 1
      $(".source_left_nav").find(".source_type_title i").removeClass("active")
      $(".source_left_nav").find(".source_type_fine").hide()
      $(".source_left_nav").eq(eq).find(".source_type_title i").addClass("active")
      $(".source_left_nav").eq(eq).find(".source_type_fine").show()
    })


    $("#compreID .fine-icon").click(function (e) {
      let type = $(this).attr("data-type")
      getAllSiteMap(type, newDateM, true)
      getAllMapList(type, newDateM)
      // getAllWhole(type, false,queryDate)

    })
    $("#fine-iconID .fine-icon").click(function (e) {
      let type = $(this).attr("data-type")
      warning(type, warnDate, false, true)
    })
    $('.fine-icon').click(function (e) {
      $(".fine-icon").removeClass('source_selected')
      $(this).addClass('source_selected')
    })
    $("#titClose").click(function (e) {
      $("#realAnalysis")[0].style.display = "none"
      $("#Regional")[0].style.display = "block"
    })

  })

</script>


<!-- <script>
  $(function () {
    var tileLayer = new BMap.TileLayer({
      zIndex: 2,
    });
    var imagesTileLayer = new BMap.TileLayer({
      zIndex: 1,
    });
    tileLayer.getTilesUrl = function (tileCoord, zoom) {
      var x = tileCoord.x;
      var y = tileCoord.y;
      var url = 'http://11.16.127.137:8082/haidian_' + 202202 +
        '/token833769810323949CFCB9C89C7B6733D1/wmts/haidian_' + 202202 +
        '/webmercator/WTMS/haidian_' + 202202 + '/webmercator/' + zoom + '/' + x + '/' + y + '.png';
      return url;
    }
    imagesTileLayer.getTilesUrl = function (tileCoord, zoom) {
      var x = tileCoord.x;
      var y = tileCoord.y;
      var url = 'http://11.16.125.18:8081/tiles/' + zoom + '/' + x + '/' + y + '.jpg';
      return url;
    }
    map.addTileLayer(tileLayer);
    map.addTileLayer(imagesTileLayer);
  })
</script> -->